<template>
  <contentModel v-if="modelValue" title="编辑" @close="cancel">
    <template #title> 编辑 </template>
    <a-form ref="formRef" :model="form" auto-label-width :rules="rules">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-form-item field="value1" label="密级">
            <a-select v-model="form.value1" placeholder="请选择" allow-clear>
              <a-option value="1">Beijing</a-option>
              <a-option value="2">Shanghai</a-option>
              <a-option value="3">Guangzhou</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="value2" label="物料编码">
            <a-input v-model="form.value2" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="value2" label="物料名称">
            <a-input v-model="form.value2" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="value2" label="子件结构对数">
            <a-input v-model="form.value2" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="6">
          <a-form-item field="value2" label="应到数量">
            <a-input v-model="form.value2" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="value2" label="目的库房">
            <a-input v-model="form.value2" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="value2" label="转移系数">
            <a-input v-model="form.value2" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="value2" label="到货确认数量(库存)">
            <a-input v-model="form.value2" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="6">
          <a-form-item field="value2" label="到货确认数量(采购)">
            <a-input v-model="form.value2" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="value2" label="批号">
            <a-input v-model="form.value2" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="value2" label="件号">
            <a-input v-model="form.value2" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="value2" label="长/宽(M)">
            <a-input v-model="form.value2" placeholder="请输入" />
            <a-input v-model="form.value2" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="6">
          <a-form-item field="value2" label="父型号件号">
            <a-input v-model="form.value2" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="value2" label="制造商">
            <a-input v-model="form.value2" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="value2" label="制造日期">
            <a-date-picker
              v-model="form.value7"
              style="width: 100%"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="value2" label="出厂日期">
            <a-date-picker
              v-model="form.value7"
              style="width: 100%"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="value2" label="实际到货日期">
            <a-date-picker
              v-model="form.value7"
              style="width: 100%"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="6">
          <a-form-item field="value2" label="装箱数量">
            <a-input v-model="form.value2" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="value2" label="是否限用">
            <a-input v-model="form.value2" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="value2" label="限用型号">
            <a-input v-model="form.value2" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="value2" label="限用批次">
            <a-input v-model="form.value2" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="value2" label="限用架次">
            <a-input v-model="form.value2" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="6">
          <a-form-item field="value2" label="限用说明">
            <a-input v-model="form.value2" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="value2" label="供方合格证号">
            <a-input v-model="form.value2" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="value2" label="机型">
            <a-input v-model="form.value2" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-button type="primary" style="margin-right: 10px" @click="addLeft"
      >添加</a-button
    >
    <a-button type="primary" style="margin-right: 10px" @click="editLeft"
      >保存</a-button
    >
    <a-button type="primary" style="margin-right: 10px" @click="deleteLeft"
      >删除</a-button
    >
    <a-table
      row-key="id"
      :row-selection="bottomRowSelection"
      :columns="columns"
      :data="data2"
      @select="bottomSelect"
      @selection-change="bottomSelectionChange"
    />
    <template #header-right>
      <a-space>
        <a-button type="outline" @click="handleCancel(record, rowIndex)"
          >取消</a-button
        >
        <a-button
          type="primary"
          :loading="loading"
          @click="handleSubmit(record, rowIndex)"
          >保存</a-button
        >
      </a-space>
    </template>
  </contentModel>
</template>

<script lang="ts" setup>
  import { defineAsyncComponent, reactive, ref } from 'vue';

  const contentModel = defineAsyncComponent(
    () => import('@/common/components/content-model/index.vue')
  );

  defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
  });
  const emits = defineEmits(['update:modelValue']);
  const cancel = () => {
    emits('update:modelValue', false);
  };

  // const { cancel } = useModelFun();
  const formRef = ref(null);
  const form = reactive({
    value1: '',
    value2: '',
    value3: '',
    value4: '',
    value5: '',
    value7: null,
  });
  const rules = {
    value7: [
      {
        required: true,
        message: '发货日期必填',
      },
    ],
  };
  const handleSubmit = () => {
    formRef.value.validate((validate) => {
      if (!validate) {
        cancel();
      }
      console.log(validate);
    });
  };
  // const handleOk = () => {
  //   cancel();
  // };
  const handleCancel = () => {
    cancel();
  };

  const bottomRowSelection = {
    type: 'checkbox',
  };
  const columns = [
    {
      title: '密级',
      dataIndex: 'name',
    },
    {
      title: '机载软件名称',
      dataIndex: 'salary',
    },
    {
      title: '机载软件版本',
      dataIndex: 'salary',
    },
    {
      title: '机载软件安装时间',
      dataIndex: 'salary',
    },
    {
      title: '机载软件安装单位',
      dataIndex: 'salary',
    },
    {
      title: '项目',
      dataIndex: 'salary',
    },
    {
      title: '第1次更改',
      dataIndex: 'salary',
    },
    {
      title: '第2次更改',
      dataIndex: 'salary',
    },
    {
      title: '第3次更改',
      dataIndex: 'salary',
    },
    {
      title: '重要记事',
      dataIndex: 'salary',
    },
    {
      title: '第1次更改后',
      dataIndex: 'salary',
    },
    {
      title: '第2次更改后',
      dataIndex: 'salary',
    },
    {
      title: '第3次更改后',
      dataIndex: 'salary',
    },
  ];

  const data2 = reactive([
    {
      id: 1,
      key: '1',
      name: 'Jane Doe',
      salary: 23000,
      address: '32 Park Road, London',
      email: 'jane.doe@example.com',
    },
    {
      id: 12,
      key: '1',
      name: 'Jane Doe',
      salary: 23000,
      address: '32 Park Road, London',
      email: 'jane.doe@example.com',
    },
    {
      id: 13,
      key: '1',
      name: 'Jane Doe',
      salary: 23000,
      address: '32 Park Road, London',
      email: 'jane.doe@example.com',
    },
  ]);
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  let bottomSelectRowList: Array<any> = [];
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  let bottomSelectRow = null;
  const bottomSelect = (
    rowKeys: string | number[],
    rowKey: string | number,
    record: any
  ) => {
    console.log(record);
    bottomSelectRow = record;
  };
  const bottomSelectionChange = (rowKeys: string | number[]) => {
    console.log(rowKeys);
    if (rowKeys && rowKeys.length) {
      bottomSelectRowList = rowKeys;
    }
  };
  // const getDetailTableList = async (query = {}) => {
  //   const page = detailTable.value.getStatus();
  //   detailTableLoading.value = true;
  //   const { data } = await getPmsDcdPageDetail({
  //     ...query,
  //     ...page,
  //   });
  //   detailTableData.value = data.list;
  //   detailTableTotal.value = data.total;
  //   detailTableLoading.value = false;
  // };
</script>
